import { Component, OnInit, Input, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
declare let d3: any;


@Component({
  selector: 'app-multi-chart',
  template: `
      <div>
         <nvd3 [options]="options" [data]="data"></nvd3>
      </div>
  `,
  // templateUrl: './multi-chart.html',
  styleUrls: ['./../../../../../node_modules/nvd3/build/nv.d3.css'],
  encapsulation: ViewEncapsulation.None
})
export class MultiChartComponent implements OnInit, OnChanges {
  options;
  data;

  allData:      any;
  oneMonths:    any;
  threeMonths:  any;
  lastSevenDay: any;

  _ratings: any[] = [];
  _reviews: any[] = [];

  @Input() set ratings(value: any[]) { }
  @Input() set reviews(value: any[]) { }

  constructor() { }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(`changes--->`, changes);
    this._ratings.length = 0;
    changes.ratings.currentValue.forEach(element => {
      this._ratings.push({ x: element.x, y: element.y });
    });

    this._reviews.length = 0;
    changes.reviews.currentValue.forEach(element => {
      this._reviews.push({ x: element.x, y: element.y });
    });

    this.data = [
      {
        'values': this._ratings,
        'key': 'Ratings',
        'color': '#8b008b',
        'yAxis': 1,
        'type': 'line'
      },
      {
        'values': this._reviews,
        'key': 'Reviews',
        'color': '#6495ed',
        'yAxis': 2,
        'type': 'line'
      }
    ];

    this.options = {
      chart: {
        type: 'multiChart',
        height: 450,
        margin: {
          top: 20,
          right: 40,
          left: 60,
          bottom: 20
        },
        x: function(d) { return d.x; },
        y: function(d) { return d.y; },
        useInteractiveGuideline: true,
        interactiveLayer: {
          tooltip: {
                    contentGenerator: function (e) {
                      var series  = e.series[0];
                      var series1 = e.series[1];
                      if (series.value === null) return;

                      if (series1.value === null) return;

                      var rows =
                                "<tr>" +
                                  "<td class='key'>" + 'RatingsValue: ' + "</td>" +
                                  "<td class='x-value'><span>content</span><strong>" + (series.value?series.value.toFixed(2):0) + "</strong></td>" +
                                  "<td class='key'>" + 'PricesValue: ' + "</td>" +
                                  "<td class='y-value'><span>content</span><strong>" + (series1.value?series1.value.toFixed(2):0) + "</strong></td>" +
                                "</tr>";

                      var header =
                                  "<thead>" +
                                    "<tr>" +
                                      "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                                      "<td class='key'><strong>" + series.key + "</strong></td>" +
                                    "</tr>" +
                                    "<tr>" +
                                      "<td class='legend-color-guide'><div style='background-color: " + series1.color + ";'></div></td>" +
                                      "<td class='key'><strong>" + series1.key + "</strong></td>" +
                                    "</tr>" +
                                  "</thead>";

                      return "<table>" +
                          header +
                          "<tbody>" +
                            rows +
                          "</tbody>" +
                        "</table>";
                    }
                  }
        },
        xAxis: {
          axisLabel: 'Date',
          tickFormat: function(d) {
            return d3.time.format('%m/%d/%Y')(new Date(d))
          }
        },
        yAxis1: {
          axisLabel: 'Ratings'
        },
        yAxis2: {
          axisLabel: 'Reviews'
        }
      }
    };
  }

}
